<template>
  <el-dialog :visible.sync="centerDialogVisible" width="40%" center>
    <div class="dia-box" id="printTest">
      <div class="dia-title">{{form.shopName}}</div>
      <div class="line">
        <div class="dashed"></div>
      </div>
      <el-row style="margin-bottom:20px;">
        <el-col :span="4">
          <div class="grid-content bg-purple">订单编号:</div>
        </el-col>
        <el-col :span="9" align="left">
          <div class="grid-content bg-purple-light">{{form.orderNo}}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="grid-content bg-purple">订单时间:</div>
        </el-col>
        <el-col :span="9" align="left">
          <div class="grid-content bg-purple-light">{{form.createTime}}</div>
        </el-col>
      </el-row>
      <div v-if="form.orderGoods" class="tab-box">
        <el-table :data="form.orderGoods" style="width: 100%">
          <el-table-column align="center" prop="date" label="商品名字">
            <template slot-scope="scope">{{scope.row.goods.goodName}}</template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="单价">
            <template slot-scope="scope">{{scope.row.goodPrice}}</template>
          </el-table-column>
          <el-table-column align="center" prop="address" label="订单数量">
            <template slot-scope="scope">{{scope.row.goodNum}}</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="all-box">
        <div class="all-list">
          <div class="all-title">消费合计:</div>
          <div class="all-pic">{{form.payMoeny+form.couponMoeny}}</div>
        </div>
        <div class="all-list">
          <div class="all-title">优惠:</div>
          <div class="all-pic">{{form.couponMoeny}}</div>
        </div>
        <div class="all-list">
          <div class="all-title">实收:</div>
          <div class="all-pic">{{form.payMoeny}}</div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="centerDialogVisible = false" v-print="'#printTest'">打 印</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      form: {}
    }
  },
  methods: {
    handGetShop(id) {
      this.orderGoodsList = []
      this.loading2 = true
      this.$api.getOrderByIdOrder({ id }).then(res => {
        // res.data.data.createTime
        res.data.data.createTime = new Date(res.data.data.createTime).Format(
          'yy-MM-dd-hh:mm'
        )
        this.form = res.data.data
        console.log(this.form)
        this.loading2 = false
      })
    }
  }
}
</script>

<style lang="scss" >
.all-box {
  margin-top: 30px;
  margin-right: 20px;
  .all-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 16px;
    .all-title {
      font-size: 14px;
      margin-right: 10px;
    }
    .all-pic {
      font-size: 14px;
    }
  }
}
.dia-box {
  width: 100%;
  text-align: center;
  .dia-title {
    font-size: 20px;
    font-weight: bold;
  }
  .line {
    // border-bottom: 1px solid #dcdfe6;
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
    margin: 0 auto;
    .dashed {
      border-top: 2px dashed #eee;
      width: 100%;
      height: 0;
    }
  }
  .tab-box {
    margin-top: 30px;
  }
}
</style>